<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/resources/dojo.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/Grid.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/document.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/claroGrid.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/claroEnhancedGrid.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/EnhancedGrid.css" />
  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" /> 
  <link rel="stylesheet" type="text/css" href="msg.css" />
</head>
<body>
	
		<script type="text/javascript"
			src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
			djConfig="parseOnLoad:true">
		</script>
	
	<script type="text/javascript">
		//load the utility page for using the utilities functions
		var utilityScript=document.createElement('script');
		utilityScript.src = "ForecastHelper.js";
		document.body.appendChild(utilityScript);
	</script>
	
	<script type="text/javascript">
		//import essential libraries for the Dojo charting
		dojo.require("dijit.form.Select");
		dojo.require("dojox.charting.Chart2D");
		dojo.require("dojox.charting.plot2d.Pie");
		dojo.require("dojox.charting.plot2d.Lines");
		dojo.require("dojox.charting.plot2d.ClusteredColumns");
		dojo.require("dojox.charting.action2d.Highlight");
		dojo.require("dojox.charting.action2d.MoveSlice");
		dojo.require("dojox.charting.action2d.Tooltip");
		dojo.require("dojox.charting.themes.MiamiNice");
		dojo.require("dojox.charting.widget.Legend");
		dojo.require("dojox.charting.themes.Tom");
		dojo.require("dojox.charting.action2d.Magnify");
	</script>
	
	<script type="text/javascript">
		/**
		 * populate the combobox of type with a given event code
		 */
		function createTypeCombo(eventCode) {
			var ref = dojo.byId("ticketType");
			var jsonData = getTypeForecast("/msgSp12/ActionController", "forecastGraph", eventCode);
			jsonData.then(function(res) {
				for(var i = 0; i < res.items.length; i++) {
					var curr = res.items[i];
					var optn = document.createElement("OPTION");
					optn.text = curr.Ticket;
					optn.value = curr.Ticket;
					ref.options.add(optn);
				}
				update();
			});
		}
		
		/**
		 * populate the combo box of event with all events' code in DB
		 */
		function createEventCombo() {
			var ref = dojo.byId("event");
			var jsonData = getEvents("/msgSp12/ActionController", "events");
			jsonData.then(function(res) {
				for(var i = 0; i < res.items.length; i++) {
					var curr = res.items[i];
					var optn = document.createElement("OPTION");
					optn.text = curr.Event_Code;
					optn.value = curr.Event_Code;
					ref.options.add(optn);
				}
				createTypeCombo(ref.value);
			});
		}
		/**
		 * when the selection of combo box get changed, update the charts
		 * if selection "ALL" selected, the clustered columns and line will be shown for all ticket types
		 * if other selection chosen, then column and pie charts will be shown for a specific ticket type
		 */	
		function update() {		
			var typeRef = dojo.byId("ticketType");
			var type = typeRef.value;
			var eventRef = dojo.byId("event");
			var eventCode = eventRef.value;
			if(type != "ALL") {
				//refresh the container which contain the charts
				var chartTag1 = "<div id=\"chartTwo\" style=\"width: 100%; height: 100%;\"><\/div>";
				var chartTag2 = "<div id=\"chartThree\" style=\"width: 100%; height: 100%;\"><\/div>";
				var legendTag1 = "<div id=\"legendThree\"><\/div>";
				var legendTag2 = "<div id=\"legendFour\"><\/div>";
				
				document.getElementById("columnContainer").innerHTML = chartTag1;
				document.getElementById("pieContainer").innerHTML = chartTag2;
				//document.getElementById("chartContainer2").innerHTML = chartTag1 + chartTag2;
				document.getElementById("legendContainer2").innerHTML = legendTag1;
				document.getElementById("legendContainer3").innerHTML = legendTag2;
				createChartByType(type, eventCode);
			}
		}
		
		
	</script>
	
	<div>
		<table align="center">
			<tr>
				<td><img src="images/NYLiberty.png" width="160" height="90" /></td>
				
				<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td>
					<table>
						<tr>
							<td><font size="7" face="times new roman" color="#FFFFFF">New York Liberty</font></td>
						</tr>
						
						<tr>
						
							<td align="right"><font size="3" color="#FFFFFF">Ticket	Sales & Forecast</font></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<img src="images/White_square.png" width="100%" height="1" />
		<br><br/>
			</div>
	<div id="content">
		<!-- Blue Menu -->
		<div id="menu_wrapper" class="blue" >
	 	<div class="left"></div>
			<ul id="menu" >
				<li><a href="index.html">Upload File</a></li>
				<li><a href="tGrid.html">TICKET DATA</a></li>
				<li><a href="fGrid.html">Forecast</a></li>
				<li><a href="sfGrid.html">Season Forecast</a></li>
				<li><a href="sGrid.html">Season Data</a></li>
				<li><a href="pGrid.html">Price Data</a></li>
				<li><a href="tgGrid.html">Ticket Group</a></li>
				<li class="active"><a href="TicketsChart.html">CHART VIEW</a>
					<ul>
						<li><a href="TicketsChart.html">Ticket Sale</a></li>
						<li><a href="ForecastChart.html">Ticket Forecast</a></li>
					</ul>
				</li>
			</ul>
		</div> 
		
		<div id="chartContainer" style="width: 1300px; height: 700px; background-color: white;">
			<div style="background-color:gray;width:1300px;" class="blue">
			<label for="Events">Events:</label>
			<select id="event" data-dojo-type="dijit.form.Select" onchange="update()"></select>
			<label for="Tickets">Ticket Type:</label>
			<select id="ticketType" data-dojo-type="dijit.form.Select" onchange="update()"></select>
			</div>
			<div id="chartContainer2" class = "aParent" style="width: 1300px; height: 650px;">
				<div id="columnContainer" style="height: 650px; width: 650px;">
					<div id="columnChart1" style="height: 100%; width: 100%;"></div>
				</div>
				<div id="pieContainer" style="height: 650px; width: 650px;">
					<div id="pieChart1" style="height: 100%; width: 100%;"></div>
				</div>
			</div>
			<div id="legendContainer" class = "aParent" style="height: 30px;">
				<div id="legendContainer2" style="height: 30px; width: 650px;">
					<div id="legendTwo"></div>
				</div>
				<div id="legendContainer3" style="height: 30px; width: 650px;">
					<div id="legendThree"></div>
				</div>
			</div>
			
		</div>
		
		<div id="footer">| Copyright © 2012 Team MSG |
			sp12_msg@cs.nyu.edu | XHTML | CSS | All rights reserved |</div>
	</div>
	
<script type="text/javascript">
	dojo.ready(function() {
		createEventCombo();
	});
</script>
</body>
</html>